<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="编号" prop="customerId">
          <el-input
            v-model="queryParams.search.customerId"
            placeholder="请输入客户编号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="名称" prop="customerName">
          <el-input
            v-model="queryParams.search.customerName"
            placeholder="请输入客户名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson" label-width="108px"
        >
          <el-input
            v-model="queryParams.search.contactPerson"
            placeholder="请输入联系人"
            clearable
            @keyup.enter="handleQuery"
          >
          </el-input>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Operation" @click="handleJobLog"
            >日志</el-button
          >
        </el-col> -->
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <!-- 表格展示 -->
      <el-table
        v-loading="loading"
        :data="customer"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="客户编号"
          width="100"
          align="center"
          prop="customerId"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户名称"
          align="center"
          prop="customerName"
          maxlength="20"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户联系人"
          align="center"
          prop="contactPerson"
          maxlength="40"
          width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户邮箱"
          align="center"
          prop="email"
          maxlength="20"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户电话"
          align="center"
          prop="phone"
          maxlength="20"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户地址"
          align="center"
          prop="address"
          maxlength="20"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="注册时间"
          width="135"
          align="center"
          prop="createdTime"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户类型"
          align="center"
          prop="typeId"
          maxlength="20"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          maxlength="20"
          :formatter="orderStatusFormatter"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button
                type="text"
                icon="Edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                type="text"
                icon="Delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </el-tooltip>
            <!-- <el-tooltip content="执行一次" placement="top">
              <el-button
                type="text"
                icon="CaretRight"
                @click="handleRun(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="任务详细" placement="top">
              <el-button
                type="text"
                icon="View"
                @click="handleView(scope.row)"
                v-hasPermi="['monitor:job:query']"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="调度日志" placement="top">
              <el-button
                type="text"
                icon="Operation"
                @click="handleJobLog(scope.row)"
                v-hasPermi="['monitor:job:query']"
              ></el-button>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.size"
        @pagination="getList"
      />
  
      <!-- 添加或修改定时任务对话框 -->
      <el-dialog :title="title" v-model="open" width="800px" append-to-body>
        <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customerName">
                <el-input
                  v-model="form.customerName"
                  placeholder="请输入客户名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户联系人" prop="contactPerson">
                <el-input
                  v-model="form.contactPerson"
                  placeholder="请输入客户联系人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户邮箱" prop="email">
                <el-input
                 v-model="form.email"
                 placeholder="请输入客户邮箱"
              />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入客户电话"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户地址" prop="address">
                <el-input
                  v-model="form.address"
                  placeholder="请选择客户地址"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册时间" prop="createdTime">
                <el-date-picker
                 v-model="form.createdTime"
                 type="date"
                 placeholder="请选择注册时间"
                 style="width: 100%;"
              />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户类型id" prop="typeId">
                <el-input
                  v-model="form.typeId"
                  placeholder="请输入客户类型id"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="customerStatus">
                <el-input
                 v-model="form.customerStatus"
                 placeholder="请输入状态"
              />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
  
      <!-- 任务日志详细 -->
      <el-dialog title="任务详细" v-model="openView" width="700px" append-to-body>
        <el-form :model="form" label-width="135px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
              <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务分组：">{{
                jobGroupFormat(form)
              }}</el-form-item>
              <el-form-item label="创建时间：">{{
                form.createTime
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="cron表达式：">{{
                form.cronExpression
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次执行时间：">{{
                parseTime(form.nextValidTime)
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="调用目标方法：">{{
                form.invokeTarget
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务状态：">
                <div v-if="form.status == 0">正常</div>
                <div v-else-if="form.status == 1">失败</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否并发：">
                <div v-if="form.concurrent == 0">允许</div>
                <div v-else-if="form.concurrent == 1">禁止</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执行策略：">
                <div v-if="form.misfirePolicy == 0">默认策略</div>
                <div v-else-if="form.misfirePolicy == 1">立即执行</div>
                <div v-else-if="form.misfirePolicy == 2">执行一次</div>
                <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="openView = false">关 闭</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="customer">
  import {
    addCustomer,
    delCustomer,
    getCustomer,
    listCustomer,
    updateCustomer,
  } from "@/api/storage/customer";
  // const router = useRouter();
  const { proxy } = getCurrentInstance();
  // const { sys_job_group, sys_job_status } = proxy.useDict(
  //   "sys_job_group",
  //   "sys_job_status"
  // );
  const status = ref([
  "正常",
  "失效"
]);
  const customer = ref([]);
  const user = ref([]);
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");
  const openView = ref(false);
  const openCron = ref(false);
  const expression = ref("");
  
  const data = reactive({
    form: {},
    queryParams: {
      page: 1,
      count: 5,
      search:{
        customerId: undefined,
        customerName: undefined,
        contactPerson: undefined,
      }
    },
    rules: {
      customerName: [
        {required: true, message: "客户名称不能为空", trigger: "blur"}
      ],
      contactPerson: [
        { required: true, message: "客户联系人不能为空", trigger: "blur" },
      ],
      email: [
        { required: true, message: "客户邮箱不能为空", trigger: "blur" },
      ],
      phone: [
        { required: true, message: "客户电话不能为空", trigger: "blur" },
      ],
      address: [
        { required: true, message: "客户地址不能为空", trigger: "blur" },
      ],
      createdTime: [
        { required: true, message: "注册时间不能为空", trigger: "blur" },
      ],
      typeId: [
        { required: true, message: "客户类型id不能为空", trigger: "blur" },
      ],
      customerStatus: [
        { required: true, message: "状态不能为空", trigger: "blur" },
      ],
    },
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询定时任务列表 */
  function getList() {
    loading.value = true;
    listCustomer(queryParams.value).then((response) => {
        customer.value = response.data.records;
      queryParams.value.size = response.data.size;
      queryParams.value.page = response.data.current;
      total.value = response.data.total;
      loading.value = false;
     
    });
  }
  //  /** 任务组名字典翻译 */
  //  function jobGroupFormat(row, column) {
  //     return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
  //  }
  /** 取消按钮 */
  function cancel() {
    open.value = false;
    reset();
  }

  function orderStatusFormatter(row) {
  if (row.status !== undefined && row.status < status.value.length) {
    return status.value[row.status];
  }
  return ""; // 或者返回一个默认值
}
  /** 表单重置 */
  function reset() {
    form.value = {
      customerId: undefined,
      customerName: undefined,
      contactPerson: undefined,
      email: undefined,
      phone: undefined,
      address: undefined,
      createdTime:undefined,
      typeId:undefined,
      customerStatus:undefined,
      concurrent: 1,
      status: "0",
    };
    proxy.resetForm("jobRef");
  }
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.page = 1;
    getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    queryParams.value.search={};
    handleQuery();
  }
  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.customerId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }
  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加客户";
  }
  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    const customerId = row.customerId || ids.value;
    getCustomer(customerId).then((response) => {
      form.value = response.data;
      open.value = true;
      title.value = "修改客户";
    });
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["jobRef"].validate((valid) => {
      if (valid) {
        if (form.value.customerId !== undefined) {
          updateCustomer(form.value).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addCustomer(form.value).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }
  /** 删除按钮操作 */
  function handleDelete(row) {
    const customerId = row.customerId || ids.value;
    proxy.$modal
      .confirm('是否确认删除仓库编号为"' + customerId + '"的数据项?')
      .then(function () {
        return delCustomer(customerId);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }
  //  /** 导出按钮操作 */
  //  function handleExport() {
  //     proxy.download("monitor/job/export", {
  //        ...queryParams.value,
  //     }, `job_${new Date().getTime()}.xlsx`);
  //  }
  
  getList();
  </script>